<template>
  <view>
    <!-- 竖向排列 row  -->
    <view class="x-goods-list-row" v-if="type === 'row'">
      <view
        class="_goods-detail"
        v-for="(item, index) in list"
        :key="index"
        :id="item.id"
        @click="onDetail(item)"
      >
        <view class="_goods-img">
          <x-image :src="formatOss(item.productMainPic)" />
          <!--          <text v-if="item.productSellingPoint" class="_tips">{{ item.productSellingPoint }}</text>-->
        </view>
        <view class="_goods-title">
          <view class="_indent2">{{item.productTitle}}</view>
          <view class="_indent1">{{ item.productSellingPoint || '' }}</view>
          <view class="_sold">
            <text>已售{{ item.salesNum }}件</text>
          </view>
          <view class="_goods-price">
            <text style="margin-right: 2px;">¥</text>
            <text class="_blod">{{ item.productPrice }}</text>
            <text class="_decoration" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 横向排列 column  -->
    <view class="x-goods-list-column" v-if="type === 'column'">
      <view
        class="_goods-detail-column"
        v-for="(item, index) in list"
        :key="index"
        :id="'pid' + index"
        @click="onDetail(item)"
      >
        <view class="_goods-img">
          <x-image :src="formatOss(item.productMainPic)" />
          <!--          <text class="_tips">热卖</text>-->
          <view v-if="item.status===0" class="_img-over"></view>
        </view>
        <view class="_goods-title">
          <view class="flex1">
            <view class="_indent2" :style="{'color': item.status === 0 ? '#999999' : '#323233'}" v-if="lineClamp">{{item.productTitle}}</view>
            <view class="_indent2 line-clamp1" :style="{'color': item.status === 0 ? '#999999' : '#323233'}" v-else>{{item.productTitle}}</view>
            <view class="_indent1">{{ item.productSellingPoint || '' }}</view>
            <view class="_sold">
              <text>已售{{ item.salesNum }}件</text>
            </view>
          </view>
          <view v-if="item.status===0" class="_goods-price">
            <text style="color: #999999">已失效</text>
          </view>
          <view v-else class="_goods-price">
            <view class="flex1">
              <text>¥</text>
              <text class="_blod">{{ item.productPrice }}</text>
              <text class="_decoration" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
            </view>
            <view class="add-cart">
              马上抢
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
import XImage from '@/components/x-image';
export default {
  name: 'XGoodsList',
  components: {
    XImage
  },
  props: {
    list: {
      type: Array,
      default: null
    },
    type: {
      type: String,
      default: 'row'
    },
    lineClamp: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url);
    },
    onDetail(item) {
      uni.navigateTo({
        url: `/pages/transit-product/index?productId=${item.productId}`
      });
    }
  }
};
</script>

<style lang="scss">
.x-goods-list-row{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  ._goods-detail{
    box-sizing: border-box;
    width: 343px;
    // min-height: 540px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    ._goods-img{
      flex-shrink: 0;
      position: relative;
      width: 343px;
      height: 343px;
      background: #FFE4E4;
      ._tips{
        position: absolute;
        top: 10px;
        left: 0;
        min-width: 72px;
        height: 36px;
        line-height: 36px;
        font-size: 24px;
        padding: 0 12px;
        text-align: center;
        color: #fff;
        background: linear-gradient(270deg, #FF2725 0%, #FF761C 100%);
        border-radius: 0px 50px 50px 0px;
      }
    }
    ._goods-title{
      background: #fff;
      padding: 10px 14px 20px 14px;
      ._indent2{
        //height: 80px;
        height: 68px;
        line-height: 34px;
        color: #323233;
        font-size: 28px;
        //font-weight: bold;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      ._indent1{
        color: #999999;
        font-size: 24px;
        height: 30px;
        font-weight: normal;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      ._sold{
        display: inline-block;
        min-width: 120px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #FFFBE8;
        color: #ED6A0C;
        font-size: 24px;
        padding: 0 4px;
      }
      ._goods-price{
        font-size: 24px;
        color: $uni-color-primary;
        display: flex;
        align-items: baseline;
        ._blod{
          font-size: 36px;
          font-weight: bold;
        }
        ._decoration{
          text-decoration:line-through;
          color: #999999;
          margin-left: 6px;
        }
      }
    }
  }
}

// column
.x-goods-list-column{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  ._goods-detail-column{
    box-sizing: border-box;
    width: 100%;
    //min-height: 240px;
    margin-bottom: 16px;
    display: flex;
    background: #FFFFFF;
    padding: 24px;
    border-radius: 6px;
    ._goods-img{
      flex-shrink: 0;
      position: relative;
      width: 200px;
      height: 200px;
      background: #FFE4E4;
      ._tips{
        position: absolute;
        top: 10px;
        left: 0;
        min-width: 72px;
        height: 36px;
        line-height: 36px;
        font-size: 24px;
        text-align: center;
        color: #fff;
        background: linear-gradient(270deg, #FF2725 0%, #FF761C 100%);
        border-radius: 0px 50px 50px 0px;
      }
      ._img-over{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #FFFFFF;
        opacity: 0.6;
        z-index: 999;
      }
    }
    ._goods-title{
      background: #fff;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      ._indent2{
        color: #323233;
        font-size: 28px;
        font-weight: bold;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      .line-clamp1{
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      ._indent1{
        margin-top: 6px;
        margin-bottom: 8px;
        color: #999999;
        font-size: 24px;
        font-weight: normal;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      ._sold{
        display: inline-block;
        min-width: 120px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #FFFBE8;
        color: #ED6A0C;
        font-size: 24px;
        padding: 0 4px;
      }
      ._goods-price{
        font-size: 24px;
        color: $uni-color-primary;
        display: flex;
        align-items: flex-end;
        ._blod{
          font-size: 36px;
          font-weight: bold;
        }
        ._decoration{
          text-decoration:line-through;
          color: #999999;
          margin-left: 6px;
        }
        .add-cart{
          min-width: 104px;
          height: 48px;
          border-radius: 60px;
          background: $uni-color-primary;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
